<template>
    <div>
      <el-row >
        <el-col :span="15" class="borderr">
          <div style="text-align: center;">
            <div style="display: flex;margin-top: 20px " v-for="lists in myinfo">
              <div style="flex:1;" v-for="chile in lists.list" @click="linktiq(chile.url)">
                <span :class="chile.clazz" style="font-size: 50px;"></span>
                <p>{{chile.title}}({{chile.number}})</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div style="display: flex;text-align: center ;margin-top: 25px" v-for="chile in Notice">
            <div style="flex:1;">
              <span :class="chile.clazz" style="font-size: 50px;"></span>
              <p>{{chile.title}}({{chile.number}})</p>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <img src="../../assets/photo.jpg" alt="" width="128px" height="128px" class="radius">
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的论文" name="first">
          <div class="flex">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input2">
            </el-input>
            <div class="centor mt-5" style="border-style: dashed">
              <div class="avatar">
                <span class="el-icon-plus avatar-uploader-icon"></span>
                <p>提交论文</p></div>
            </div>
            <div class="centor mt-5" style="position:relative;">
              <img
                src="../../assets/photo.jpg"
                alt="" width="250px" height="250px">
              <div
                style="position:absolute; bottom: 0;background: #ffffff;height: 54px;width: 100%;text-align: left;font-size: 14px;">
                <span class="mt-3 ml-2">成都工业职业技术学院</span>
                <span style="float: right">龙天才</span>
              </div>
              <div style="position:absolute;top:0;left: 0">
                <img src="images/审核通过.png" alt="" width="120px" height="120px">
                <!-- <span class="iconfont icon-shenhetongguo1 red" style="font-size: 50px"></span> -->
              </div>
            </div>


          </div>

        </el-tab-pane>

        <el-tab-pane label="我的成果" name="second"><span class="iconfont icon-shenhetongguo1 red"></span>
        </el-tab-pane>

      </el-tabs>

    </div>
</template>

<script>
  export default {
    name: "homemain",
    data() {
      return {
        tableData: '',
        circleUrl: "https://happytell.oss-cn-beijing.aliyuncs.com/muxin/1006112520ACB5E5CC76434A35B5FA235C31964223.png?x-oss-process=style/small",
        imageUrl: '',
        activeName: 'first',
        username: "信息工程学院",
        clazz: "移动1704班",
        input2: "",
        sex: "男",
        myinfo: [{
          list: [
            {title: "我的论文", number: "0", clazz: "iconfont icon-lunwenguanli blue", url: "/my_thesis.html"},
            {title: "待审核", number: "0", clazz: "iconfont icon-daishenhe blue", url: "/my_thesis.html"},
            {title: "审核中", number: "0", clazz: "iconfont icon-shenhezhong blue", url: "/my_thesis.html"},

          ]
        }, {
          list: [
            {title: "我的成果", number: "0", clazz: "iconfont icon-jiaoxuechengguo blue", url: "/my_thesis.html"},
            {title: "审核通过", number: "0", clazz: "iconfont icon-shenhetongguo blue", url: "/my_thesis.html"},
            {title: "退回", number: "0", clazz: "iconfont icon-tuihui red", url: "/my_thesis.html"},
          ]
        }],
        Notice: [{title: "公告", number: "0", clazz: "iconfont icon-tongzhi-mian- yellow"}, {
          title: "通知",
          number: "0",
          clazz: "iconfont icon-gonggaoguanli yellow"
        }]

      }

    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      linktiq(song) {


      }
    }
  }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .centor:hover {
    border-color: #409EFF;
  }

  .centor {
    border: 2px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    width: 250px;
    height: 250px;
    display: flex;
    margin-right: 20px;

    overflow: hidden;
    text-align: center;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 28px;
    height: 28px;
    line-height: 250px;
    text-align: center;
  }

  .avatar {
    width: 250px;
    height: 300px;
    display: block;
    text-align: center;
  }

  .el-header {
    background-color: #e2e0de;
    color: #fff;
    line-height: 60px;
  }

  .el-aside {
    border-right: 2px solid #e2e0de;
    height: 800px;
  }

  .el-aside {
    display: table-cell;
    vertical-align: middle;
    text-align: center;

  }
  .mt-5{

  }

</style>
